<template>
    <div class="voucher">
        <div class="title">
            {{ $t('assemble.代金券兑换记录') }}
        </div>
        <div class="voucherBox">
            <div class="dataBox">
                <div class="dataHeader">
                    <p>{{ $t('assemble.代金券名称') }}</p>
                    <p>{{ $t('assemble.代金券面值') }}</p>
                    <p>{{ $t('assemble.比例金额') }}</p>
                    <p>{{ $t('assemble.使用状态') }}</p>
                    <p>{{ $t('assemble.代金券码') }}</p>
                    <!-- <p>截止兑换时间</p> -->
                </div>
                <div class="dataList">
                    <div class="item" v-for="(item, index) in dataList" :key="item.id">
                        <p style="width: 200px; text-align: center;">{{ item.coupon.name }}</p>
                        <p style="width: 200px; text-align: center;">{{ item.coupon.price }}</p>
                        <p style="width: 200px; text-align: center;">{{ item.proportion }}</p>
                        <p v-if="item.status == 1" style="width: 100px; text-align: center;">{{ $t('assemble.已使用') }}</p>
                        <p v-if="item.status == 0" style="width: 100px; text-align: center;">{{ $t('assemble.未使用') }}</p>
                        <p style="width: 200px; text-align: center;">{{ item.code }}</p>
                        <!-- <p style="width: 120px; text-align: center;">{{ item.date }}</p> -->
                    </div>
                </div>

            </div>

        </div>

        <div class="fenye">
            <el-pagination background layout="prev, pager, next" :page-size="this.pageInfo.pageSize"
                :page-sizes="[5, 10, 15, 20]" :total="pageInfo.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
    
<script>
import { couponExchangeList } from "@/utils/api"
export default {
    data() {
        return {
            pageInfo: {
                total: 0,
                page: 1,
                pageSize: 5
            },
            dataList: [
                {
                    id: 1,
                    name: "代金券名称",
                    price: '代金券面值',
                    status: '0',
                    date: '2022.09.09',
                    code: "222222"
                },
                {
                    id: 2,
                    name: "代金券名称",
                    price: '代金券面值',
                    status: '1',
                    date: '2022.09.09',
                    code: "222222"
                },
            ]
        }
    },
    created() {
        this.getcouponExchangeList()
    },
    methods: {
        async getcouponExchangeList() {
            let res = await couponExchangeList({
                token: localStorage.getItem("token"),
                page:this.pageInfo.page,
                page_size: this.pageInfo.pageSize
            })
            if (res.code == 1000) {
                this.dataList = res.data.data
                this.pageInfo.total = res.data.total
            }

            console.log("代金券记录", res)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val
            this.getcouponExchangeList()
        },
    }
}
</script>
    
<style scoped lang="scss">
.fenye {
    margin-top: 50px;
    float: right;

    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #0057A7;
    }
}

.voucher {
    .title {
        font-size: 15px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
    }

    .voucherBox {
        padding: 30px;
        padding-bottom: 75px;
        background: #ffffff;
        margin-top: 30px;

        .dataBox {
            margin-top: 15px;

            .dataHeader {
                width: 1095px;
                height: 79px;
                display: flex;
                justify-content: space-between;

                p {
                    font-size: 15px;
                    font-family: PingFang SC-Bold, PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    line-height: 18px;

                    &:nth-of-type(1) {
                        width: 200px;
                        text-align: center;
                    }

                    &:nth-of-type(2) {
                        width: 200px;
                        text-align: center;
                    }
                    &:nth-of-type(3) {
                        width: 200px;
                        text-align: center;
                    }

                    &:nth-of-type(4) {
                        width: 100px;
                        text-align: center;
                    }

                    &:nth-of-type(5) {
                        width: 200px;
                        text-align: center;
                    }

                  
                }
            }

            .dataList {
                font-size: 13px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 18px;

                .item {
                    width: 100%;
                    height: 106px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 2px solid #F7F8FA;
                    // padding-left: 10px;

                    img {
                        width: 90px;
                        height: 75px;
                        border-radius: 10px 10px 10px 10px;
                        opacity: 1;
                    }
                }
            }
        }
    }

}
</style>